{% extends "base.html" %}
{% block css %}
<!--Import Editor.md CSS-->
<link rel="stylesheet" href="/static/editor.md/css/editormd.min.css">
{% endblock %}

{% block main %}
<div class="container">
    <div id="article-editor">
        <textarea id="editor-input"></textarea>
    </div>
    <div class="row">
        <div class="col s12 m8 offset-m2 l6 offset-l3">
            <div class="row">
                <form class="col s12">
                    <div class="file-field input-field">
                        <div class="btn">
                            <span>MD文档</span>
                            <input type="file" id="md-file" accept=".md">
                        </div>
                        <div class="file-path-wrapper">
                            <input id="md-file-wrapper" class="file-path validate" type="text" placeholder="或者上传本地markdown文档, 页面刷新后请重新上传">
                        </div>
                    </div>
                    <p>
                        <label for="top">
                            <input id="top" type="checkbox" />
                            <span>文章置顶</span>
                        </label>
                    </p>
                    <div class="row">
                        <div class="input-field col s12">
                            <i class="material-icons prefix">link</i>
                            <input type="text" id="url_suffix" class="validate" maxlength="40" data-length="40">
                            <label class="active" for="url_suffix">url后缀(English Only)</label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="input-field col s12">
                            <i class="material-icons prefix">title</i>
                            <input type="text" id="title" class="validate" maxlength="40" data-length="40">
                            <label for="title">文章标题(Support Chinese and English)</label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="input-field col s12">
                            <i class="material-icons prefix">person_outline</i>
                            <select id="authors" multiple>
                                <option value="" disabled>请选择作者</option>
                                {% for author in author_list %}
                                <option value="{{ author.author }}">{{ author.author }}</option>
                                {% empty %}
                                <option value="" disabled>没有预设作者</option>
                                {% endfor %}
                            </select>
                            <label for="authors">选择文章作者(支持多个)</label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="input-field col s12">
                            <i class="material-icons prefix">add_circle_outline</i>
                            <input type="text" id="new-author" class="validate" maxlength="40" data-length="40">
                            <label class="active" for="new-author">添加新的作者(单次只能输入一位)</label>
                        </div>
                    </div>
                    <div class="center">
                        <button type="button" class="waves-effect waves-light btn" id="add-author" disabled>提交新的作者</button>
                        <button type="button" class="waves-effect waves-light btn" id="refresh-authors">手动刷新列表</button>
                    </div>
                    <div class="row">
                        <div class="input-field col s12">
                            <i class="material-icons prefix">bookmark</i>
                            <select id="tags" multiple>
                                <option value="" disabled>请选择标签</option>
                                {% for tag in tag_list %}
                                <option value="{{ tag.tag }}">{{ tag.tag }}</option>
                                {% empty %}
                                <option value="" disabled>没有预设标签</option>
                                {% endfor %}
                            </select>
                            <label for="tags">选择文章标签(支持多个)</label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="input-field col s12">
                            <i class="material-icons prefix">add_circle_outline</i>
                            <input type="text" id="new-tag" class="validate" maxlength="40" data-length="40">
                            <label class="active" for="new-tag">添加新的标签(单次只能输入一个)</label>
                        </div>
                    </div>
                    <div class="center">
                        <button type="button" class="waves-effect waves-light btn" id="add-tag" disabled>提交新的标签</button>
                        <button type="button" class="waves-effect waves-light btn" id="refresh-tags">手动刷新列表</button>
                    </div>
                    <div class="row">
                        <div class="input-field col s12">
                            <i class="material-icons prefix">bookmark_border</i>
                            <select id="categories" multiple>
                                <option value="" disabled>请选择分类</option>
                                {% for c in category_list %}
                                <option value="{{ c.category }}">{{ c.category }}</option>
                                {% empty %}
                                <option value="" disabled>没有预设分类</option>
                                {% endfor %}
                            </select>
                            <label for="tags">选择文章分类(支持多个)</label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="input-field col s12">
                            <i class="material-icons prefix">add_circle_outline</i>
                            <input type="text" id="new-category" class="validate" maxlength="40" data-length="40">
                            <label class="active" for="new-category">添加新的标签(单次只能输入一个)</label>
                        </div>
                    </div>
                    <div class="center">
                        <button type="button" class="waves-effect waves-light btn" id="add-category" disabled>提交新的标签</button>
                        <button type="button" class="waves-effect waves-light btn" id="refresh-categories">手动刷新列表</button>
                    </div>
                    <div class="center">
                        <button type="button" class="waves-effect waves-light btn" id="add-article" disabled>提交文章</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
<script type="text/javascript" src="/static/editor.md/editormd.min.js" charset="UTF-8"></script>
{% block custom %}
<script type="text/javascript" src="/static/js/add_article_custom.js" charset="UTF-8"></script>
{% endblock %}
<script type="text/javascript" src="/static/js/add_article_common.js" charset="UTF-8"></script>
{% endblock %}